<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>习惯打卡</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body id="index">
		<div id="app">
			<header>
				<h3>习惯打卡</h3>
				<input v-on:keyup.enter="addSignIn()" v-model="inputData" type="text" class="form-control" placeholder="输入新的打卡习惯, 按回车添加">
			</header>

			<main>
				<ul v-for="(item, index) in sign_in_list">
					<li v-show="item.today_sign == false" class="icon icon-default">
						{{item.name}}
						<strong>累计{{item.count}}天</strong>
						<button class="sign-in-button" type="button" @click="signIn(index)">签到</button>
						<button class="sign-in-button" type="button" @click="updateIndex(index)" data-toggle="modal" data-target="#exampleModal">删除</button>
					</li>
					<li v-show="item.today_sign == true" class="icon icon-success">
						{{item.name}}
						<strong>累计{{item.count}}天</strong>
						<button class="sign-in-button" type="button" @click="updateIndex(index)" data-toggle="modal" data-target="#exampleModal">删除</button>
					</li>
				</ul>

				<!-- Modal -->
				<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
				 aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">警告</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								一旦删除, 该习惯相关记录都会被删除, 请确认
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary" v-on:click="deleteSignIn(1)">确认</button>
							</div>
						</div>
					</div>
				</div>
			</main>

			<footer>
				<p>最高打卡天数 {{maxSignInCount}} 天</p>
				<p>打卡习惯总数 {{totalCount}} 个</p>
				<p>今日未打卡习惯 {{notSignInCount}} 个</p>
			</footer>
		</div>


		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data() {
					return {
						indexNumber : '',
						inputData: '',
						sign_in_list: []
					}
				},
				created(){
					return this.init();
				},
				computed:{
					totalCount(){
						return this.sign_in_list.length;
					},
					maxSignInCount(){
						
						const countArray = this.sign_in_list.map(obj=>{
							return obj.count;
						}) ;
						
						return Math.max.apply(Math, countArray);
					},
					notSignInCount(){
						const notSignInArray = this.sign_in_list.filter(obj=>{
							return obj.today_sign === false;
						})
						return notSignInArray.length;
					}
				},
				methods: {
					init(){
						const singInListJson = localStorage.getItem('signIn001');
						this.sign_in_list = JSON.parse(singInListJson);
					},
					addSignIn(event) {
						if (this.inputData === '') {
							alert('请填写内容');
							return;
						}
						if (this.inputData.indexOf(' ') != -1) {
							alert("请不要输入空格");
							return;
						}
						this.sign_in_list.unshift({
							name: this.inputData,
							count: 0,
							today_sign: false
						});
						this.inputData = '';
						localStorage.setItem('signIn001', JSON.stringify(this.sign_in_list));
					},
					deleteSignIn() {
						$('#exampleModal').modal('hide')
						this.sign_in_list.splice(this.indexNumber, 1);
						this.indexNumber = '';
						localStorage.setItem('signIn001', JSON.stringify(this.sign_in_list));
					},
					updateIndex(index){
						this.indexNumber = index;
					},
					signIn(index){
						this.sign_in_list[index].today_sign = true;
						this.sign_in_list[index].count++;
						localStorage.setItem('signIn001', JSON.stringify(this.sign_in_list));
					}
				}
			});
		</script>
	</body>
</html>
